<template>
    <div class="list banxin">
        <ul class="list_box tanxin">
            <li v-for="item, index in AllInfo"  :key="item.id">
                <div class="commodity-data-box">
                    <div class="commodityImg">
                        <img :src="'http://sc.wolfcode.cn' + item.coverImg" alt="">
                    </div>
                    <div class="commodityText">
                        <p>{{ item.name }}</p>
                    </div>
                    <div class="commodityNum">
                        <span>{{ item.coin }}</span>
                        <img src="../../assets/images/home/monad.png" alt="">
                    </div>
                    <div class="commodity_change">
                        立即兑换
                    </div>
                    <img src="../../assets/images/home/hot-j.png" alt="" v-show="item.isHotSale" class="hot">
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
// import axios from 'axios';

export default {
    data() {
        return {
            listInfo: [],
            hotListInfo: [],
            changeClas: [false, false, false, false]
        }
    },
    methods: {
        gotoDta() {
            console.log(123);
            // 跳转到对应详情页
            this.$router.push('/deatils')
        }
    },
    props: ["AllInfo"]
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";

.list_box {
    flex-wrap: wrap;
    justify-content: left;

    li {
        background: #fff;
        cursor: pointer;
        transition: all 0.5s linear;
        margin-right: 20px;

        &:last-of-type {
            margin-right: 0;
        }

        &:nth-child(2) {
            margin-right: 0;
        }

        &:hover {
            transform: translateY(-20px);
        }

        &:hover .commodity_change {
            background: #0A328E;
            color: #fff;
        }
    }

    .commodity-data-box {
        position: relative;

        .hot {
            position: absolute;
            left: 0;
            top: 0;
        }

        .commodityImg {
            img {
                width: 285px;
                height: 331px;

            }
        }

        .commodityText {
            p {
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #333333;
                line-height: 100px;
                text-align: center;
                box-sizing: border-box;
            }
        }

        .commodityNum {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
            box-sizing: border-box;

            span {
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: bold;
                color: #FD604D;
                line-height: 23px;
                margin-right: 6px;

            }

            img {
                width: 20px;
                height: 20px;
            }
        }

        .commodity_change {
            width: 100px;
            height: 36px;
            border: 1px solid #0A328E;
            font-size: 18px;
            font-family: SourceHanSansSC;
            font-weight: 300;
            color: #0A328E;
            line-height: 36px;
            text-align: center;
            margin: 32px auto;
            // margin-bottom: 32px;
        }
    }
}
</style>